<template>
 <div v-show="isShow" class="toast">
     {{msg}}
 </div>
</template>

<script>

 export default {
  name:'Toast',
  data () {
   return {
       msg:'',
       isShow:false
   };
  },
    
  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
      showMsg(msg,duration=2000){
          console.log("Toast show");
          this.isShow=true
          this.msg=msg
          setTimeout(()=>{
              this.isShow=false
          },duration)

      }
  },

  watch: {}

 }

</script>
<style scoped>
.toast{
    position: fixed;
    top: 50%;
    left: 50%;
    /* 根据边界居中 */
    transform: translate(-50%,-50%);
    color: white;
    padding: 10px;
    background: rgba(0, 0, 0, .75);
    z-index: 999;
}
</style>